<!--描述浮层-->
<template>
    <div class="tips-wrapper not-copy" ref="tipsWrapper" :id="id" v-if="visible" @mousedown="mousedown">
        <div class="tips-header">
            <a-row>
                <a-col :span="20">
                    <div class="tips-title">
                        <a-icon type="snippets" /> {{title}}
                    </div>
                </a-col>
                <a-col :span="4" @click.stop="isShow = !isShow" class="tips-close">
                    <!-- <a-icon type="close" @click.stop="closeDialog()" class="tips-close" /> -->
                    <a-icon :type="isShow?'down':'up'" />
                </a-col>
            </a-row>
        </div>
        <transition name="slide-fade">
            <div v-show="isShow" class="tips-main">
                <div style="font-weight:700;">{{content.name}}</div>
                <div style="margin:10px 0;color:#666">{{content.remark}}</div>
            </div>
        </transition>
        <!-- <div class="tips-footer">
      <span class="dialog-footer">
        <a-button @click="closeDialog">取 消</a-button>
        <a-button type="primary" @click="closeDialog">确 定</a-button>
      </span>
    </div> -->
    </div>
</template>

<script>
export default {
    name: "Tipsmodal",
    props: {
        visible: {
            type: Boolean,
            default: true
        },
        id: {
            type: String | Number,
            default: "tips1"
        },
        title: {
            type: String,
            default: "标题"
        },
        content: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            selectElement: "",
            isShow: true
        };
    },
    mounted() {
        window.onresize = () => {
            //   return (() => {//立即执行函数
            //     window.screenWidth = window.innerWidth
            //     this.screenWidth = window.screenWidth
            //   })()
            setTimeout(() => {
                this.$refs.tipsWrapper.style.position = "absolute";
                this.$refs.tipsWrapper.style.top = "96px";
                this.$refs.tipsWrapper.style.left = "80%";
            }, 100);
        };
    },
    computed: {},
    methods: {
        closeDialog(e) {
            this.visible = false;
        },
        mousedown(event) {
            console.log(event, this.id);
            this.selectElement = document.getElementById(this.id);
            var div1 = this.selectElement;
            //   this.selectElement.style.cursor = "move";
            this.isDowm = true;
            var distanceX = event.clientX - this.selectElement.offsetLeft;
            var distanceY = event.clientY - this.selectElement.offsetTop;

            document.onmousemove = function (ev) {
                var oevent = ev || event;
                div1.style.left = oevent.clientX - distanceX + "px";
                div1.style.top = oevent.clientY - distanceY + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                div1.style.cursor = "default";
            };
        },
        show() {
            this.isShow = !this.isShow;
        }
    }
};
</script>

<style lang="less" scoped>
.tips-wrapper {
    position: absolute;
    height: auto;
    width: 240px;
    border: 1px solid rgb(255, 225, 146);
    top: 96px;
    right: 20px;
    border-radius: 6px;
}

.dialog-footer {
    text-align: right;
}

.tips-footer {
    background-color: white;
}

.tips-header {
    background-color: rgb(255, 225, 146);
    line-height: 36px;
    height: 36px;
    font-size: 12px;
    .tips-title {
        color: #333;
        text-align: left;
        padding-left: 20px;
        font-weight: 700;
        vertical-align: top;
    }
    .tips-close {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
}
.tips-main {
    padding: 20px 20px 0px 20px;
    min-height: 200px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    font-size: 12px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.1s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
    opacity: 0;
}
</style>